<template>
	<view class="tab-box" :style="{zIndex}">
		<view v-if="showselected" style="flex: 1;">
			<view :class="['tabbar',{'radius': isRadius}]">
				<view class="navigator">
					<view :class="['navigator-item',{'activeItem': curIndex === index}]" v-for="(item,index) in tabBar"
						:key="'pagePath' + index" @click="switchTab(index,item)">
						<image class="icon" :src="`${item.iconPath}-${theme}.png`" mode="widthFix"
							v-if="curIndex !== index">
						</image>
						<image class="icon" :src="`${item.selectedIconPath}-${theme}.png`" mode="widthFix" v-else>
						</image>
						<view :class="['item-text',{'text-active':curIndex === index}]">
							{{ item.text }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex'
	import {
		getCurrentPagePath
	} from '@/utils/routerJump.js'
	export default {
		name: "tabBar",
		props: {
			// 是否在页面使用tarBar
			showselected: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				zIndex: 2,
				tabBar: [{
						pagePath: "/pages/tabBar/home/index",
						iconPath: "/static/image/tabBar/home-inactive",
						selectedIconPath: "/static/image/tabBar/home-active",
						text: this.$t('Page.menu.home'),
					},
					{
						pagePath: "/pages/tabBar/invite/index",
						iconPath: "/static/image/tabBar/invite-inactive",
						selectedIconPath: "/static/image/tabBar/invite-active",
						text: this.$t('Page.menu.invite'),
						isLogin: true
					},
					{
						pagePath: "/pages/tabBar/notify/index",
						iconPath: "/static/image/tabBar/notify-inactive",
						selectedIconPath: "/static/image/tabBar/notify-active",
						text: this.$t('Page.menu.notify'),
						isLogin: true
					},
					{
						pagePath: "/pages/tabBar/mine/index",
						iconPath: "/static/image/tabBar/mine-inactive",
						selectedIconPath: "/static/image/tabBar/mine-active",
						text: this.$t('Page.menu.mine'),
						isLogin: true
					}
				],
			}
		},
		computed: {
			...mapState({
				theme: state => state.app.theme,
				curIndex: state => state.app.activeTab
			}),
			...mapGetters('app', ['isLogin']),
			isRadius() {
				const obj = {
					'black': false,
					'red': true
				}
				return obj[this.theme]
			}
		},
		created() {
			uni.hideTabBar()
		},
		methods: {
			...mapMutations('app', ['saveActiveTab']),
			switchTab(index, item) {
				console.log("index: ", index);
				console.log("item: ", item);
				if (item.isLogin && !this.isLogin) {
					uni.showToast({
						title: this.$t('Page.home.qxdl'),
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/auth/auth?type=0'
						})
					}, 1000)
					return
				}
				this.saveActiveTab(index)
				uni.setStorageSync('curMenuPagePath', item.pagePath);
				uni.switchTab({
					url: item.pagePath,
				})
			}
		}
	}
</script>

<style scoped>
	.tab-box {
		width: 100vw;
		position: fixed;
		left: 0;
		bottom: var(--window-bottom);
		display: flex;
		align-items: center;
	}

	.tabbar {
		height: 50px;
		background: var(--bg-18);
	}

	.radius {
		border-radius: 15px 15px 0 0;
	}

	.navigator {
		display: flex;
		align-items: center;
		height: 100%;
	}

	.navigator-item {
		padding-top: 10px;
		flex: 1;
		text-align: center;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: var(--color-4);
		font-size: 10px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}

	.activeItem {
		color: var(--color-3);
	}

	.icon {
		width: 19px;
		height: 21px;
	}
</style>